<template>

	<view class="uni-comment-body">

		<view class="inputCss" style="position: absolute;margin-top: -60rpx;margin-left: 315rpx;">
						<uni-popup ref="popup" type="bottom" background-color="white">
							<view class="example">
								<!-- 基础表单校验 -->
								<uni-forms ref="valiForm">
									<uni-forms-item label="" name="introduction">
										<uni-easyinput type="textarea" v-model="discuss.content" placeholder="请输入评论" />
									</uni-forms-item>
								</uni-forms>
								<button type="primary" @click="sureadd">发布</button>
								<button type="warn" @click="cancel">取消</button>
							</view>
						</uni-popup>
						<uni-fab ref="fab" :pattern="pattern" horizontal="right" vertical="bottom" direction="horizontal"
							@trigger="trigger" @fabClick="fabClick" />
					</view>
				
					<view class="uni-no-comment" :style="'display: '+(list.length?'none':'block')">暂无评论</view>
					<!-- 评论区 start -->
					<view class="uni-comment">
						<!-- 循环显示一级评论 -->
						<view class="uni-comment-list" v-for="(item,index) in list" :key="item.id"
							v-if="item.pid==null||item.pid==0">
							<view class="uni-comment-face" @click.stop="clickUser((item.parent||{}).id)">
								<u-avatar :src="(item.parent||{}).avar"></u-avatar>
							</view>
							<view class="uni-comment-body">
								<view class="uni-comment-top" @click.stop="clickUser((item.parent||{}).id)">
									<text style="color: black;">{{(item.parent||{}).name}}</text>
								</view>
								<view class="uni-comment-date">
									<text>{{timestampFormat(item.time)}}</text>
								</view>
								<view>
									<view class="uni-comment-content">{{item.content}}
										<view style="position: absolute;margin-top: -80rpx;margin-left: 400rpx;">
											<u-button type="primary" :plain="true" size="mini"
												@click="clickComment(item.id,item.floor)">回复</u-button>
										</view>
										<view style="position: absolute;margin-top: -80rpx;margin-left: 500rpx;"
											:style="'display:'+((item.parent||{}).id==parentId?'block':'none')">
											<u-button type="warning" :plain="true" size="mini" @click="del(item.id,index)">删除
											</u-button>
										</view>
									</view>
								</view>
				
				
								<!-- 循环展示二级评论 -->
								<view class="uni-comment-list" v-for="(item2,index2) in list"
									v-if="item2.pid!=null&&item2.pid!=0&&item2.floor==item.floor">
									<view class="uni-comment-face" @click.stop="clickUser((item2.parent||{}).id)">
										<u-avatar :src="(item2.parent||{}).avar"></u-avatar>
									</view>
									<view class="uni-comment-body">
										<view class="uni-comment-top" @click.stop="clickUser((item2.parent||{}).id)">
											<text style="color: black;">{{(item2.parent||{}).name}}</text>
										</view>
										<view class="uni-comment-date">
											<text>{{timestampFormat(item2.time)}}</text>
										</view>
										<view v-if="item2.pdiscuss!=null">
											<view class="uni-reply-comment-content"
												:style="'display: '+((item2.pdiscuss||{}).parent.name && (item2.pdiscuss||{}).content?'block':'none')">
												@{{(item2.pdiscuss||{}).parent.name}}：{{(item2.pdiscuss||{}).content}}</view>
											<view class="uni-comment-content">{{item2.content}}</view>
											<view>
												<view class="uni-comment-replay-btn" @click="clickComment(item2.id,item2.floor)">
													回复
												</view>
												<view class="uni-comment-replay-btn"
													:style="'display:'+((item2.parent||{}).id==parentId?'block':'none')"
													style="position: absolute;margin-top: -45rpx;margin-left: 100rpx;"
													@click="del(item2.id,index2)">
													删除
												</view>
											</view>
										</view>
										<view v-else>
											{{item2.content}}
										</view>
									</view>
								</view>
				
							</view>
						</view>
				
					</view>
				</view>
	</view>
</template>

<script>
	export default {
		props: {
			//评论集合
			list: {
				type: Array
			},
			photoId: 0,
			parentId: 0,
		},
		data() {
			return {
				discuss: {
					id: 0,
					content: "",
					senderId: 0, //TODO：用户id写死了
					pid: 0,
					time: "",
					floor: 0,
					index: 0,
				},
				show: false,
				type: 'text',
				border: true,
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
			}
		},
		methods: {
			//删除评论
			del(e, index) {
				console.log(e, index);
				this.discuss.id = e
				this.discuss.index = index
				this.discuss.photoId = this.photoId
				this.$emit("del", this.discuss)
			},
			//点击评论上的回复
			clickComment(id, floor) {
				this.$refs.popup.open('botton')
				this.discuss.pid = id
				this.discuss.floor = floor
				this.discuss.photoId = this.photoId
			},
			//确认评论
			sureadd() {
				console.log(this.discuss);
				this.$emit("sureadd", this.discuss)
				this.$refs.popup.close()
				this.discuss.pid = 0
				this.discuss.floor = 0
				this.discuss.content = ""
			},
			//显示评论窗口
			fabClick() {
				this.$refs.popup.open('botton')
			},
			//关闭评论窗口
			cancel() {
				this.$refs.popup.close()
				this.discuss.pid = 0
				this.discuss.floor = 0
				this.discuss.content = ""
			},
			timestampFormat(timestamp) {
				if (!timestamp) return '';

				function zeroize(num) {
					return (String(num).length == 1 ? '0' : '') + num;
				}

				var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
				var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数

				var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
				var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象

				var Y = tmDate.getFullYear(),
					m = tmDate.getMonth() + 1,
					d = tmDate.getDate();
				var H = tmDate.getHours(),
					i = tmDate.getMinutes(),
					s = tmDate.getSeconds();

				if (timestampDiff < 60) { // 一分钟以内
					return "刚刚";
				} else if (timestampDiff < 3600) { // 一小时前之内
					return Math.floor(timestampDiff / 60) + "分钟前";
				} else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
					return '今天' + zeroize(H) + ':' + zeroize(i);
				} else {
					var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
					if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
						return '昨天' + zeroize(H) + ':' + zeroize(i);
					} else if (curDate.getFullYear() == Y) {
						return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					} else {
						return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "uview-ui/index.scss";

	.inputCss {

		color: red,
		::v-deep.input {
			.u-input__input {
				color: black
			}
		}
	}

	.reply {
		color: royalblue;
	}

	.u-collapse-content {
		color: $u-tips-color;
		font-size: 14px;
	}

	.propertyBox {
		flex-flow: row;
		justify-content: stretch;
		display: flex;
	}

	/* comment */
	.uni-comment-body {
		background-color: white;
		font-size: 28upx;
	}

	.uni-no-comment {
		text-align: center;
		height: 200upx;
		padding-top: 100upx;
		color: black;
	}

	view {
		font-size: 28upx;
	}

	.uni-comment {
		padding: 5rpx 0;
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		color: white;
	}

	.uni-comment-list {
		flex-wrap: nowrap;
		padding: 10rpx 0;
		margin: 10rpx 0;
		width: 100%;
		display: flex;
	}

	.uni-comment-face {
		width: 70upx;
		height: 70upx;
		border-radius: 100%;
		margin-right: 20upx;
		flex-shrink: 0;
		overflow: hidden;
	}

	.uni-comment-face image {
		width: 100%;
		border-radius: 100%;
	}

	.uni-comment-body {
		width: 100%;
	}

	.uni-comment-top {
		line-height: 1.5em;
		justify-content: space-between;
	}

	.uni-comment-top text {
		color: #000000;
		font-size: 28upx;
	}

	.uni-comment-date {
		line-height: 24upx;
		flex-direction: row;
		justify-content: space-between;
		display: flex !important;
		flex-grow: 1;
		color: black;
	}

	.uni-comment-date text {
		color: gray;
		font-size: 24upx;
		line-height: 24upx;
	}

	.uni-comment-content {
		line-height: 1.6em;
		font-size: 30upx;
		padding: 10rpx 0;
		color: black;
	}

	.uni-reply-comment-content {
		line-height: 1.6em;
		font-size: 30upx;
		padding: 5upx 10upx;
		margin: 10upx 0;
		background-color: #d1d1d147;
		border-radius: 5upx;
		color: gray;
	}

	.uni-comment-replay-btn {
		background: #FFF;
		font-size: 24upx;
		line-height: 30upx;
		padding: 5rpx 20upx;
		border-radius: 30upx;
		color: gray;
		margin: 0 10upx;
		margin-left: 0;
		padding: 8upx 16upx;
		background-color: #d1d1d147;
		display: inline-block;
	}

	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {
		@include flex;
	}

	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.popup-height {
		@include height;
		width: 200px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		color: #fff;
		background-color: #e1f3d8;
	}

	.popup-warn {
		color: #fff;
		background-color: #faecd8;
	}

	.popup-error {
		color: #fff;
		background-color: #fde2e2;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #09bb07;
	}

	.warn-text {
		color: #e6a23c;
	}

	.error-text {
		color: #f56c6c;
	}

	.info-text {
		color: #909399;
	}

	.dialog,
	.share {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.dialog-box {
		padding: 10px;
	}

	.dialog .button,
	.share .button {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		margin: 0;
		margin-top: 10px;
		padding: 3px 0;
		flex: 1;
	}

	.dialog-text {
		font-size: 14px;
		color: #333;
	}
</style>
